<template>

  <div class="popupMask">
    <div class="popupPenal" style="width:60%;height:70%;">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          选择{{weekArr[type]}}任务
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent">
        <div class="penalrow selectw100" style="padding:0 20px;height:45px;line-height:45px;border-bottom: 1px solid #f1f1f1;" v-for="item in taskArr">
          <span style="display: inline-block;margin-right: 20px;line-height: 30px;width: 30%;">{{item.name}}</span>

          <div style="display:inline-block;width:50%;">
            采样日期:&nbsp;&nbsp;
            <el-date-picker size="mini" v-model="item.collectionDate" type="date" value-format="yyyy-MM-dd"  format = "yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-button style="position: absolute;right: 50px;top:8px" type="primary" size="mini" @click="orderTestPlan(item)" :disabled="!isRepeat">下达</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    props: ['newOrEdit', 'canEdit', 'type'],
    data() {
      return {
        yesornoValue: '1',
        enableStatusValue: '1',
        caiyangData: [
          {
            rongqileixing: '',
            pingshu: '',
          }
        ],
        taskArr: [],
        weekArr: {
          "W": "周",
          "D": "日",
          "M": "月"
        },
        caiyangrenDataValue: '',
        xianchangrenDataValue: '',
        isRepeat: true,
      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'bottleType', 'caiyangrenData', 'xianchangrenData']),
    },
    mounted() {
      this.$http({
        method: 'post',
        apiUrl: '/detection/getPlanByCondition.htm',
        params: { taskType: this.type },
        isJson: true,
      }).then(res => {
        if (res.code === 0) {
          console.log(res.data)
          for (var i in res.data) {
            res.data[i].collectionDate = this.util.date()//当前时间
          }
          this.taskArr = res.data
        } else {
        }
      }, )

    },
    methods: {
      orderTestPlan(item) {
        this.isRepeat = false;
        this.$http({
          method: 'post',
          apiUrl: '/detection/orderTestPlan.htm',
          params: item,
          isJson: false,
        }).then(res => {
          this.isRepeat = true;
          if (res.code === 0) {
            console.log(res)
            this.$message({
              showClose: true,
              message: '任务下达成功',
              type: 'success'
            })
            this.close()
            this.$parent.readTasks()
          } else {
            //			          	reject(err)
          }
        }, )

      },
      close() {
        this.$parent.xiadaRZYShow = false;
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tabName {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
  }

  .activeTab {
    color: #409eff;
  }

  .tabPageContent {}
</style>